<template>
  <div id="singer">
    <el-row type="flex" justify="center">
      <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
        <div class="language">
          <p class="c-name">语种：</p>
          <ul>
            <li
              v-for="(item, index) in areaCate"
              :key="index"
              @click="
                tabList(item);
                languageBtn = index;
              "
            >
              <p class="tag" :class="{ active: index === languageBtn }">
                {{ item.name }}
              </p>
            </li>
          </ul>
        </div>
        <div class="language">
          <p class="c-name">分类：</p>
          <ul>
            <li
              v-for="(item, index) in languageCate"
              :key="index"
              @click="tabList(item);areaBtn = index"
            >
              <p class="tag" :class="{ active: index === areaBtn }">
                {{ item.name }}
              </p>
            </li>
          </ul>
        </div>
        <div class="language">
          <p class="c-name">筛选：</p>
          <ul>
            <li
              v-for="(item, index) in filtrateSS"
              :key="index"
              @click="tabList(item);filtrateBtn = index"
            >
              <p class="tag" :class="{ active: index === filtrateBtn }">
                {{ item.name }}
              </p>
            </li>
          </ul>
        </div>
        <div class="singer-list">
          <ul>
            <router-link tag="li" to="/homepage/contents/singerRank">
              <div class="images">
                <img src="../../../assets/images/singer.png" alt="" />
              </div>
              <p>歌手榜单<i class="el-icon-arrow-right"></i></p>
            </router-link>
            <li v-for="(item, index) in singerList" :key="index" @click="skipSingerDetail(item)">
              <div class="images">
                <img :src="item.img1v1Url" alt="" />
              </div>
              <div class="desc">
                <span>{{ item.name }}</span>
                <div class="icons"><Icon type="ios-person-outline" /></div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "singer",
  data() {
    return {
      //保证一次加载的标识
      isbool: true,
      count: 2,
      languageBtn: 0,
      areaBtn: 0,
      filtrateBtn: 0,
      
      languageCate: [
        {
          type: -1,
          name: "全部",
        },
        {
          type: 1,
          name: "男歌手",
        },
        {
          type: 2,
          name: "女歌手",
        },
        {
          type: 3,
          name: "乐队组合",
        },
      ],
      areaCate: [
        {
          area: -1,
          name: "全部",
        },
        {
          area: 7,
          name: "华语",
        },
        {
          area: 96,
          name: "欧美",
        },
        {
          area: 8,
          name: "日本",
        },
        {
          area: 16,
          name: "韩国",
        },
        {
          area: 0,
          name: "其他",
        },
      ],
      filtrateSS: [
        {
          filtrate: -1,
          name: "热门",
        },
        {
          filtrate: "a",
          name: "A",
        },
        {
          filtrate: "b",
          name: "B",
        },
        {
          filtrate: "c",
          name: "C",
        },
        {
          filtrate: "d",
          name: "D",
        },
        {
          filtrate: "e",
          name: "E",
        },
        {
          filtrate: "f",
          name: "F",
        },
        {
          filtrate: "g",
          name: "G",
        },
        {
          filtrate: "h",
          name: "H",
        },
        {
          filtrate: "i",
          name: "I",
        },
        {
          filtrate: "j",
          name: "J",
        },
        {
          filtrate: "k",
          name: "K",
        },
        {
          filtrate: "l",
          name: "L",
        },
        {
          filtrate: "m",
          name: "M",
        },
        {
          filtrate: "n",
          name: "N",
        },
        {
          filtrate: "o",
          name: "O",
        },
        {
          filtrate: "p",
          name: "P",
        },
        {
          filtrate: "q",
          name: "Q",
        },
        {
          filtrate: "r",
          name: "R",
        },
        {
          filtrate: "s",
          name: "S",
        },
        {
          filtrate: "t",
          name: "T",
        },
        {
          filtrate: "u",
          name: "U",
        },
        {
          filtrate: "v",
          name: "V",
        },
        {
          filtrate: "w",
          name: "W",
        },
        {
          filtrate: "x",
          name: "X",
        },
        {
          filtrate: "y",
          name: "Y",
        },
        {
          filtrate: "z",
          name: "Z",
        },
        {
          filtrate: 0,
          name: "#",
        },
      ],
      //list
      singerList: [],
    };
  },
  created() {
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/artist/list?timetamp=" + new Date().getTime(),
      params: {
        type: -1,
        area: -1,
      },
    }).then((res) => {
      this.singerList = res.data.artists;
      console.log("歌手分类列表", res.data);
    });
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop; //滚动条距离顶部的高度
      let scrollHeight = document.documentElement.offsetHeight; //当前页面的总高度
      let clientHeight = document.documentElement.clientHeight; //当前可视的页面高度
      if (scrollTop + clientHeight >= scrollHeight - 50 && this.isbool) {
        //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
        this.isbool = false;
        this.axios({
          method: "get",
          withCredentials: true,
          url:
            "https://music.hzbiz.net/artist/list?timetamp=" +
            new Date().getTime(),
          params: {
            limit: 30,
            offset: (this.count - 1) * 30,
            initial: this.$store.state.filtrateFlag,
            type: this.$store.state.languageFlag,
            area: this.$store.state.areaFlag,
          },
        }).then((res) => {
          this.singerList.push(...res.data.artists);
          // console.log(this.singerList);
          console.log(res.data);
          this.isbool = true;
          this.count++;
        });
      }
    });
  },
  methods: {
    //跳转详情页
    skipSingerDetail(item){
      this.$router.push({
        path:"/homepage/contents/singerDetail",
        query:{
          id:item.id
        }
      })
    },
    tabList(item) {
     if(item.area){
         this.$store.commit("tabFlag",{areaFlag:item.area})
     }
      if(item.type){
         this.$store.commit("tabFlag",{languageFlag:item.type})
     }
      if(item.filtrate){
         this.$store.commit("tabFlag",{filtrateFlag:item.filtrate})
     }
        this.axios({
          method: "get",
          withCredentials: true,
          url:
            "https://music.hzbiz.net/artist/list?timetamp=" +
            new Date().getTime(),
          params: {
            limit: 30,
            initial: this.$store.state.filtrateFlag,
            type: this.$store.state.languageFlag,
            area: this.$store.state.areaFlag,
          },
        }).then((res) => {
          this.singerList = res.data.artists;
        });
    
    },
  },
};
</script>

<style  scoped>
.language {
  display: flex;
}
.language ul {
  display: flex;
  flex-wrap: wrap;
}
.language p.c-name {
  color: #000000;
  min-width: 46px;
}
.language ul li {
  width: 76px;
  color: #676767;
  cursor: pointer;
  text-align: center;
  height: 17px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.language ul li:not(:last-child) {
  border-right: 1px solid rgba(59, 58, 58, 0.1);
}
.language ul li:hover {
  color: #000;
}
.language ul li p {
  width: 60px;
  height: 20px;
  border-radius: 10px;
}
.language ul li p.active {
  color: #ec4141;
  background-color: #fdf5f5;
}
.singer-list ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.singer-list li {
  width: 150px;
  cursor: pointer;
}
.singer-list li > p {
  margin-top: 15px;
  margin-bottom: 20px;
}
.singer-list li:not(:nth-child(6n)) {
  margin-right: 14px;
}
.singer-list li .images {
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(59, 58, 58, 0.1);
}
.singer-list li .desc {
  margin-top: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.singer-list li .desc .icons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  background-color: #ec4141;
  color: #ffffff;
  border-radius: 50%;
}
</style>